<!-- 设置销售指标显示规则 -->
<template>
  <div class="set_sales">
    <dt-modal-edit ref='edit' title='设置销售指标显示规则' :label-width='130' okText='确定' :width='500'
      @ok='onOk'>
      <Row class="label_warp">
        <Col span="24" class="tips">
        <Icon type="md-alert" class="tips_icon" />
        <div v-html="topTips"></div>
        </Col>
      </Row>
      <ul class="sourcedataCon">
        <li v-for="(item, index) in infoList" :key="index">
          <label :class="[index<5?'colorBlue':'']">{{ item.dailyConfigName }}</label>
          <div class="upDown">
            <span>
              <em @click="upItems(index)">
                <Icon type="md-arrow-round-up" :disabled="true" size="20"
                  :color="index == 0 ? '#c5c8ce' : '#2d8cf0'" />
              </em>
              <em @click="downItems(item,index)">
                <Icon type="md-arrow-round-down" size="20" :color="
                        index == infoList.length - 1? '#c5c8ce' : 'red'" />
              </em>
            </span>
          </div>
        </li>
      </ul>
    </dt-modal-edit>

  </div>
</template>

<script>
  import dailyApi from '@/biz/buildingHome/daily'

  export default {
    components: {},
    data() {
      return {
        infoList: [],
        topTips: `您可设置销售指标在“案场日报”中的显示排序。<span style='color:red'>排序最靠上的5个指标，将在日报首页中显示</ span>`,
        currentDate: ''
      }
    },
    methods: {
      // 上移
      upItems(index) {
        if (index > 0) {
          let update = this.infoList[index - 1]
          this.infoList.splice(index - 1, 1)
          this.infoList.splice(index, 0, update)
        } else {
          this.$Message.warning('已不可上移!')
        }
      },

      // 下移
      downItems(item, index) {
        console.log(index)
        if (index + 1 != this.infoList.length) {
          let downdate = this.infoList[index + 1]
          this.infoList.splice(index + 1, 1)
          this.infoList.splice(index, 0, downdate)
        } else {
          this.$Message.warning('已经是最后一条，不可下移!')
        }
      },
      show(currentDate) {
        this.currentDate = currentDate
        this.$refs.edit.show()
        this.getData()
      },
      getData() {
        let params = {
          date: this.currentDate,
          buildingId: this.$dt.buildInfo().housesId
        }
        dailyApi.findDailySales(params).then(res => {
          this.infoList = res
        })
      },
      onOk() {
        let params = {
          dailySalesReqList: this.infoList
        }
        console.log(params)
        dailyApi.sortDailySales(params).then(res => {
          this.$$emit('changeSales')
          this.$refs.edit.hide()
        })
      },

    },
    mounted() {

    },
  }
</script>
<style lang='scss' scoped>
  .set_sales {

    .sourcedataCon {
      max-height: 400px;
      min-height: 250px;
      overflow-y: auto;

      li {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        color: #515a6e;
        font-size: 14px !important;
        white-space: nowrap;
        list-style: none;
        display: flex;
        flex-direction: row;
        position: relative;

        input {
          margin-top: 1px;
          cursor: pointer;
        }

        label {
          margin: 0 4px;
          cursor: pointer;
          min-width: 120px;
        }

        .upDown {
          position: absolute;
          right: 5px;
          cursor: pointer;
        }
      }
    }

    .label_warp {
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;

      .tips {
        line-height: 20px;
        font-size: 14px;
        display: flex;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

    .colorBlue {
      color: #2d8cf0;
    }
  }
</style>